*{
    margin: 0;border: 0;
    box-sizing: border-box;
}
body{
    /*overflow-x: hidden;*/
    min-width: 1200px;
}
html,body{
    height: 100%;
}
body.o-hidden{
    overflow: hidden;
}
body{
}
.home-banner{
    position: relative;
    z-index: 1;
}
#b04{
    /*margin-top: -10px;*/
}
#b04 ul li{
    float: left;
}
#b04 .dots{
    position: absolute;
    bottom: 30px;
    width: 300px;
    text-align: center;
    left: 50%;
    margin-left: -135px;
}
#b04 li.dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    cursor: pointer;
    border:1px solid #fff;
    margin-right: 15px;
    font-size: 0;
    border-radius: 50%;
}
#b04 li.dot.active{
    background: #fff;
}
.fix-bg{
    width: 100%;padding-top: 51.51%;
    position: absolute;
    top:0;left: 0;
    z-index: -1;
    perspective: 1000px;
    background: rgb(0,0,0);
    /*opacity: .5;*/
    overflow: hidden;
}
.fix-bg div{
    width: 100%;height: 100%;position: absolute;top:0;left: 0;

    transform: translate3d(0,0,0);
    /*transition: opacity 3s, transform 3s;*/
    opacity: 0;
}
@keyframes fade-in
{
    0%   {opacity: 0;transform: translate3d(0,0,0);}
    70%  {opacity: 1;}
    100% {opacity: 0;    transform: translate3d(0,0,100px);  }
}
.fix-bg div.in{
    /*transform: translate3d(0,0,50px);*/
    /*opacity: 1;*/
    animation:fade-in 5s;
    -webkit-animation:fade-in 5s;
    opacity: 1;
}
.fix-bg div.bg01{
    background: url(../images/fix-bg01.jpg);
    background-size: 110%;
}

.fix-bg div.bg02{
    background: url(../images/fix-bg02.jpg);
    background-size: 110%;
}

.fix-bg div.bg03{
    background: url(../images/fix-bg03.jpg);
    background-size: 110%;
}

.fix-bg div.bg04{
    background: url(../images/fix-bg04.png);
    background-size: 110%;
}

.s1{
    position: fixed;width: 100%;height: 100%;
    top:0;left: 0;
    z-index: 3;
}
.s1 ._mask{
    top:0;left: 0;

    position: fixed;width: 100%;height: 100%;
    z-index: 1;
    background: #000;
    opacity: 1;
    transition: opacity 2s, transform 1s;
    transition-delay: 1.5s;
}
.s1 .logoo{
    filter:blur(5px);
    transition: transform 1s,filter 1s,margin-top 1s,opacity 1s;
    transition-delay: .5s;
    background: url(../images/logoo.png);
    width: 228px;height: 49px;
    position: fixed;left: 50%;
    top:50%;
    margin-left: -114px;
    margin-top: 0;
    z-index: 2;
    opacity: 0;
}
.s1 ._text1{
    font-size: 30px;
    width: 708px;
    position: fixed;left: 50%;top:50%;
    margin-left: -354px;text-align: justify;
    transition: transform 1s,margin-top 1s,opacity 1s;
    transition-delay: .7s;
    opacity: 0;
    z-index: 2;
    color: #fff;
    margin-top: 100px;
    text-justify:inter-ideograph;
    background: url(../images/text1.png) no-repeat top center;
    height: 76px;
}

.s1 ._text2{
    font-size: 22px;
    width: 460px;
    position: fixed;left: 50%;top:50%;
    margin-left: -230px;text-align: center;
    transition: transform 1s,margin-top 1s,opacity 1s;
    transition-delay: .8s;
    opacity: 0;
    z-index: 2;
    color: #fff;
    margin-top: 150px;
    background: url(../images/text2.png) no-repeat center;
    height: 30px;
}
.s1.active ._mask{
    opacity: 0;
}
.s1.active .logoo{
    opacity: 1;
    filter:blur(0px);
    margin-top: -75px;
}

.s1.active ._text1{
    opacity: 1;
    margin-top: 10px;
}
.s1.active ._text2{
    opacity: 1;
    margin-top: 50px;
}
.section01{
    height: 356px;
    background: url(../images/repeat-bg.png) repeat #fcf8ee;
    text-align: center;
}
.section01>div{
    width: 860px;justify-content: space-between;margin: 0 auto 0 auto;
    padding-top: 60px;
    
}
.section01>div img{
    display: block;margin: 0 auto 25px auto;
}
.section02{
    text-align: center;
    background: #fff;
}
.section02 .list{
    justify-content: left;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 1080px;
    margin: 10px auto 0 auto;
}
.section02 .list .item{
    width: 360px;margin-bottom: 25px;
    float: left;
    perspective: 1000px;
    height: 300px;
}
.section02 .list .item img{
    margin: 0 auto;
    display: block;
    transform: translate3d(0,0,0);
    transition: transform .5s;
}
.section02 .list .item img:hover{
    transform: translate3d(0,0,50px);
}
.section02 .list .item ._btn{
    display: block;
    margin: 0 auto;
    text-align: right;
    font-size: 12px;
    border-radius: 10px;
    width: 78px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    padding-right: 8px;cursor: pointer;
    background-color: #d1ab80;
    background-size: 0;
    transition: width .5s;
    position: relative;
}
.section02 .list .item ._btn:hover{
    width: 100px;height: 22px;line-height: 22px;
    /*background: url(../images/icon-add-cart.png) no-repeat 7px center #d1ab80;*/
    /*background-size: 18px 16px;*/
}
.section02 .list .item ._btn .icon-add-cart{
    display: inline-block;position: absolute;
    background: url(../images/icon-add-cart.png) no-repeat;
    background-size: 100%;
    left: 8px;
    top: 2px;
    transition: transform .5s;
    transition-timing-function: ease-in-out;
    width: 18px; height:16px;
    transform:scale(0);

}
.section02 .list .item ._btn:hover .icon-add-cart{
    width: 18px; height:16px;
    transform:scale(1);
}
#scroll-top{
    background: url(../images/scroll-top.png);
    width: 43px;height: 43px;
    position: fixed;
    bottom: 100px;
    cursor: pointer;z-index: 1;display: none;
}

.section01 ._item{
    position: relative;width: 191px;height: 191px;
    display: inline-block;
}
.section01 ._item:nth-child(1){
    float: left;
}
.section01 ._item:nth-child(3){
    float: right;
}
.section01 ._item a._link{
    display: block;width: 100%;height: 100%;
}
.section01 ._item a._text{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -70px;
}
.section01 a._text{
    display: none;
}
.section01.active a._text{
    display: block;
}
.circle01{
    background: url(../images/circle.png);
    width: 191px;height: 191px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    transform: translateY(10px);
    opacity: 0;
}
.section01.active .circle01,.section01.active .circle02,.section01.active .circle03{
    transform: translateY(0);
    opacity: 1;
}
._animate01:hover,._animate02:hover,._animate03:hover{
    animation: ty10 1s;
}
@keyframes ty10 {
    0%{transform: translateY(10px);
        opacity: 0;}
    100%{
        transform: translateY(0);
        opacity: 1;}
}
.circle02{
    background: url(../images/circle.png);
    width: 191px;height: 191px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    transition-delay: .2s;
    transform: translateY(10px);
    opacity: 0;
}
.circle03{
    background: url(../images/circle.png);
    width: 191px;height: 191px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    transition-delay: .4s;
    transform: translateY(10px);
    opacity: 0;
}

._animate01{
    background: url(../images/animate-img01.png);
    width: 128px;height: 132px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    left: 31px;
    top: 29px;
    transform: translateY(15px);
    opacity: 0;
}

._animate02{
    background: url(../images/animate-img02.png);
    width: 113px;height: 134px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    left: 39px;
    top: 28px;
    transition-delay: .2s;
    transform: translateY(15px);
    opacity: 0;
}

._animate03{
    background: url(../images/animate-img03.png);
    width: 113px;height: 141px;
    position: absolute;
    transition: opacity 1s, transform 1s;
    left: 39px;
    top: 25px;
    transition-delay: .4s;
    transform: translateY(15px);
    opacity: 0;
}

.section01.active ._animate01,.section01.active ._animate02,.section01.active ._animate03{
    transform: translateY(0);
    opacity: 1;
}
.slider-menu{
    width: 60px;
    height: 240px;
    border-radius: 5px;
    padding: 10px 5px;
    background: rgb(0,0,0);
    opacity: .5;
    font-size: 12px;
    color: #fff;
    position: fixed;
    right: 5px;
    bottom: 100px;
    z-index: 1;
    text-align: center;
}
.slider-menu .item{
    width: 50px;height: 50px;
    display: block;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dotted #fff;
}
.slider-menu .item span{
    position: absolute;
    bottom: 6px;
    display: block;
    width: 100%;
    left: 0px;
}
.slider-menu .item .badge{
    width: 16px;
    height: 16px;
    position: absolute;
    top: -5px;
    right: 5px;
    background: #ff0000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
}
.slider-menu .item:nth-child(1){
    background: url(../images/slider-icon01.png) no-repeat center top;
}
.slider-menu .item:nth-child(2){
    background: url(../images/slider-icon02.png) no-repeat center top;
}
.slider-menu .item:nth-child(3){
    background: url(../images/slider-icon03.png) no-repeat center top;
}
.slider-menu .item:nth-child(4){
    background: url(../images/slider-icon04.png) no-repeat center top;
}
.qr-a:hover .qr{
    /*opacity: 1;*/
}
.qr{
    background: url(../images/qr-bg.png) no-repeat;
    width: 183px;
    height: 192px;
    position: absolute;
    top: -172px;
    left: 446px;
    display: none;
    /*transition: opacity .5s;*/
    /*opacity: 0;*/
}
.qr img{
    width: 144px;
    height: 144px;
    display: block;
    margin: 20px auto;
    float: none;
}
#add-height{
    position: relative;
}
.icon-scroll{
    background: url(../images/icon-scroll.png);
    width: 22px;
    height: 103px;
    left: 50%;
    bottom:0;
    margin-left: -11px;
    position: absolute;
}
.icon-scroll-tip{
    background: url(../images/icon-jump.png) no-repeat;
    display: block;width: 17px;height: 29px;margin: 0 auto;
    animation: jump 1s;
    animation-iteration-count:infinite;
    position: relative;top:-20px;
    left: -3px;
}
@keyframes jump {
    0%{transform: translate(0,0);}
    50%{transform: translate(0,20px)}
    100%{transform: translate(0,0)}
}